<template>
    <div :class="{'inline fields':param.in_zip_inline,field:!param.in_zip_inline}" v-if="!isRadio">
        <field_title :title_show="title_show" :field="field" ></field_title>
      <fselect v-if="enum_val" :fname="field.name" :val="val" @selectValsChange='selectEvent' :data="enum_val"
               :placeholder="placeholder" :editType="editType"></fselect>
    </div>
    <div class="ui field many_lines-enum" v-else-if="many_lines">
      <field_title :title_show="title_show" :field="field" ></field_title>

      <div class="ui inline fields" v-for="(line,lind) in lines" >
        <div class="field" v-for="(item,ind) in line">
          <span style="display: none;">
            {{k=lines_key[lind][ind]}}
          </span>
          <div class="ui radio checkbox " :class="[field.name,{disabled:k!=val&&fval_disable}]">
            <input type="radio" :value="k" :name="field.name">
            <label for="">{{item}}</label>
          </div>
        </div>
      </div>
    </div>
    <div class="ui inline fields"  v-else>
    <field_title :title_show="title_show" :field="field" ></field_title>
    <div class="field" v-for="(item,k) in field.enum_val">
      <div class="ui radio checkbox" :class="field.name">
        <input type="radio" :value="k" :name="field.name">
        <label for="">{{item}}</label>
      </div>
    </div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';
  import _ from 'lodash';
  import fselect from 'components/form/select'
  import field_title from 'components/field/com/field_title';

  export default {
    data() {
      return {
        val: '',
        enum_val: null,
        fval_disable: false,
        rval: {}
      }
    },
    methods: {
      up_fval_disable([target_field,targetVal]) {
        if(target_field==this.field.name) {
          this.fval_disable=targetVal==1;
        }
      },
      up_fval(target_field) {
        if(target_field==this.field.name) {
          let val = logic.edit.getVal(this, target_field);
          this.val = val;
          if(this.isRadio)
            this.toCheck();
        }
      },
      selectEvent(val, fname,text) {
//        if(this.field.is_judge) {
//          if(this.val != val)
//            util.eventEmit(this, 'hl_judge',this.field.name, val);
//        }
        this.val = val
        this.$emit('setVo', this.field.name, this.val,text)
      },
      toCheck(){
        let input = `${this.selector} [value="${this.val}"]`;
        $(input).closest('.checkbox').checkbox('check');
      },
        onCheck(){
            let _that = this
            if (this.isRadio) {
                $(this.selector).checkbox({
                    onChecked(el) {
                        let _val=$(this).val()
//                        _that.val = _val
//                        _that.$emit('setVo', _that.field.name, _that.val)
                        _that.$emit('setVo', _that.field.name, _val)
                    }
                });
                this.toCheck();
            }
        }
    },
    watch: {
    },
    computed: {
      title_show(){
        return !this.field.hideTitle&&!this.field.no_title;
      },
      many_lines(){
        return this.lines.length>1;
      },
      lines(){
        let vals=Object.values(this.field.enum_val)
        return _.chunk(vals, 7);
      },
      lines_key(){
        let keys=Object.keys(this.field.enum_val)
        return _.chunk(keys, 7);
      },
      isRadio() {
        if (this.type)
          return this.type == 'radio'
        else{
            if(!this.field.enum_val)
                return false;
            {
                if(util.isArray(this.field.enum_val)&&!util.isString(this.field.enum_val[0])) {
//                    tool.cl('this.field.enum_val[0]:', this.field.enum_val[0]);
                    return false;
                }
            }

          let len=0;
          if(util.isObject(this.field.enum_val)) {
            len=Object.keys(this.field.enum_val).length
          }else
            len=this.field.enum_val.length
          return len>2?this.field.enum_type==1:true;
        }


      },
      placeholder() {
        return `请选择${this.field.title}`
      },
      selector(){
        return `.ui.radio.checkbox.${this.field.name}`
      },
    },
    props: ['field', 'type', 'param', 'editType'],
    components: {
      fselect,field_title
    },
    created() {

      this.val = this.field.fval ;
      logic.edit.set_enum_val(this)

      util.eventOn(this, 'up_fval', this.up_fval);
      util.eventOn(this, 'up_fval_disable', this.up_fval_disable);
        this.$nextTick(() => {
            this.onCheck();
        });
    },
    mounted() {


    }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    .many_lines-enum {
      .ui.inline.fields{
        margin-bottom:0.5em;
      }
    }
    .ui.inline.fields{
      .inline.fields{
        margin-bottom:0;
      }
    }

</style>
